<template name="contract">
  <view class="contract" v-if="info">
    <view class="navigation">
      <image class="navigationIcon" src="../../static/arrow.png" mode="" @click="navigateBack"></image>
      <text class="navigationText">Loan Agreement</text>
    </view>
    <view class="main">
      <view class="content-title">{{ info.app_name }}</view>
      <view class="content-subtitle"> Loan and Guarantee Agreement</view>
      <view class="content-content text1">
        This agreement is concluded in the form of data message, and you fully
        agree with its legal effect. You confirm this contract by clicking or
        ticking on the relevant online pages and APPs of this service
        (hereinafter collectively referred to as “lending money online service
        platform or service platform”), which means that you agree to accept and
        be bound by all the terms of this contract.
      </view>
      <view class="content-content text2">
        <view class="textItem">
          <view class="textLabel">Mobile number:</view>
          <view class="textValue">{{ userInfo.phone }}</view>
        </view>
        <view class="textItem">
          <view class="textLabel">Borrower:</view>
          <view class="textValue">{{ userInfo.userName }}</view>
        </view>
        <view class="textItem">
          <view class="textLabel">Loan Amount:</view>
          <view class="textValue">{{ userInfo.loanAmount }}</view>
        </view>
        <view class="textItem">
          <view class="textLabel">Aadhaar(ID):</view>
          <view class="textValue">{{ userInfo.cardNumber }}</view>
        </view>
      </view>
      <view class="content-content text1"> Dear Sir/Madam: </view>
      <view class="content-content1">
        We thank you for choosing {{ info.app_name }} Ltd as your financier for
        your unsecured personal loan. We are pleased to inform you that with
        respect to the above application, we have approved in principle to
        provide you with a loan as detailed below:
      </view>
      <view class="mtable">
        <view class="mtr">
          <view class="mth">Type</view>
          <view class="mth">Loan</view>
        </view>
        <view class="mtr">
          <view class="mth"> Loan term</view>
          <view class="mth"> {{ userInfo.term }} days</view>
        </view>
        <view class="mtr">
          <view class="mth"> Loan amount</view>
          <view class="mth">INR {{ userInfo.loanAmount }}</view>
        </view>
        <view class="mtr">
          <view class="mth">The type of interest</view>
          <view class="mth">Fixed</view>
        </view>
        <view class="mtr">
          <view class="mth"> Loan interest rate</view>
          <view class="mth">0.5% per month</view>
        </view>
        <view class="mtr">
          <view class="mth"> Loan Amount Validity Period</view>
          <view class="mth">Valid for 1 month from the date of signing</view>
        </view>
        <view class="mtr">
          <view class="mth">Processing Fee applicable(Will be refunded)</view>
          <view class="mth">INR {{  userInfo.loanAmount * 0.05 }} </view>
		  <!--  userInfo.interest -->
        </view>
      </view>
      <view class="content-content text1">
        Repayment Date: 20th of each month
      </view>
      <view class="content-content text1">
        The repayment starts from the next month from the loan disbursement
        date, and the bank will automatically deduct the principal and interest
        from your bound account on the monthly repayment date.
      </view>
      <view class="content-content text1">
        All applicable taxes, duties and levies will be imposed by law.
      </view>
      <view class="content-content text1">
        The processing fees and related fees will be charged prior to loan
        disbursement.The total interest will be spread over the loan period.
      </view>
      <view class="content-content text1">
        Note: Subject to terms and conditions. Overdue interest will be charged
        at 3% per month (36.5% per annum) on overdue payments from the
        instalment due date. Special Terms: Your loan is pre-approved by Al Tech
        india Ltd. In some cases, our partner banks will carry out special
        verification of your credit check for an additional fee. If you accept
        the above terms, we will pay INR{{ userInfo.loanAmount }}, which will be
        paid directly into the payroll bank account you submitted when you
        applied for the loan. Please read the terms and conditions of the
        attached loan agreement carefully and send us a signed copy of
        acceptance so that we can proceed with your loan payment.
      </view>
      <view class="content-content title"> REFUND AND CANCELATIONPOLICY </view>
      <view class="content-content text1">
        Any conditional payment made by you shall be refunded within 30 days
        according to MBK account statement. Your service will not be cancelled
        after the loan amount has been received in your account.
      </view>
      <view class="content-your">
        yours sincerity
        <image src="../../static/chapter1.png" class="content-chapter" />
      </view>
      <view class="content-just1">
        <view class="content-text content-text1">{{ info.app_name }}</view>
        <view class="content-text"> Borrower signature</view>
      </view>
      <view class="content-just2">
        <view class="content-text">{{ info.app_name }}</view>
        <view class="content-text">{{ userInfo.userName }}</view>
      </view>
      <view class="content-left"> Authorized signatory </view>
    </view>
  </view>
</template>

<script>
// import $_storage from '../../common/util/storage';
import { getDecryptString } from "../../defaut";
export default {
  name: "contract",
  data() {
    // const authentication4 = $_storage.getStorage('authentication_4');
    return {
      info: {
        app_name: "Pe plus loan",
      },
      userInfo: {
        userName: "",
        phone: "",
        cardNumber: '',
        term: '',
        loanAmount: '',
        interest: ''

      },
    };
  },
  methods: {
    // 返回
    navigateBack() {
      uni.navigateBack({
        delta: 1,
      });
    },
    getUserInfo: async function () {
      const res = await this.$http.get("/user/v1/getcurruser");
      console.log(JSON.parse(getDecryptString(res.data.data, this.$password())), 654);
      if (res.data.status == 200) {
        const { userName, phone, cardNumber ,loanAmount ,term ,interest } = JSON.parse(
          getDecryptString(res.data.data, this.$password())
        )
        this.userInfo.phone = phone
        this.userInfo.userName = userName
        this.userInfo.cardNumber = cardNumber
		this.userInfo.loanAmount=loanAmount
		this.userInfo.term=term
		this.userInfo.interest=interest
      }
    },
  },
  mounted() {
    this.getUserInfo();
  },
};
</script>

<style lang="scss" scoped>
page {
  min-height: 100vh;
  padding-bottom: 24rpx;
}

.contract {
  width: 100%;
  height: 100%;

  background: #fff;
}

.navigation {
  display: flex;
  align-items: center;
  text-align: center;
  padding: 80rpx 26rpx 20rpx;
  background: #fff;
  width: 100%;
  position: sticky;
  top: 0;
  z-index: 10;
}

.navigationIcon {
  width: 32rpx;
  height: 38rpx;
}

.navigationText {
  width: 100%;
  font-size: 36rpx;
  font-weight: 400;
  color: #000;
  line-height: 54rpx;
  letter-spacing: 2rpx;
}

.main {
  padding: 40rpx 24rpx 20rpx;
}

.contract .main .content-title {
  font-size: 48rpx;
  font-weight: bold;
  color: #000;
  margin-top: 20rpx;
  width: 100%;
  text-align: center;
}

.contract .main .content-subtitle {
  font-size: 32rpx;
  font-weight: normal;
  color: #000;
  margin-top: 14rpx;
  width: 100%;
  text-align: center;
  text-decoration: underline;
}

.contract .main .content-content {
  margin-top: 20rpx;
  word-break: break-all;
}

.contract .main .content-content1 {
  word-break: break-all;
}

.contract .main .text1 {
  margin-top: 40rpx;
  line-height: 30rpx;
  font-size: 28rpx;
  font-weight: 400;
  color: #000;
}

.contract .main .text2 {
  margin-top: 50rpx;
}

.contract .main .text2 .textItem {
  display: flex;
  align-items: center;
  line-height: 40rpx;
  color: #000;
  font-size: 28rpx;
}

.contract .main .title {
  margin-top: 40rpx;
  font-size: 38rpx;
  font-weight: bold;
}

.contract .main .mtable {
  margin-top: 30rpx;
  width: 100%;
}

.contract .main .mtable .mtr {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  display: flex;
}

.contract .main .mtable .mtr .mth {
  height: 110rpx;
  padding: 26rpx 0 26rpx 26rpx;
  width: 100%;
  border: solid 2rpx #333;

  font-size: 28rpx;
  display: flex;
  align-items: center;
  justify-content: flex-start;
}

.contract .main .mtable .mtr:nth-child(1) .mth:nth-child(1) {
  border-right: none;
  border-bottom: none;
}

.contract .main .mtable .mtr:nth-child(1) .mth:nth-child(2) {
  border-bottom: none;
}

.contract .main .mtable .mtr:nth-child(2) .mth:nth-child(1) {
  border-right: none;
  border-bottom: none;
}

.contract .main .mtable .mtr:nth-child(2) .mth:nth-child(2) {
  border-bottom: none;
}

.contract .main .mtable .mtr:nth-child(3) .mth:nth-child(1) {
  border-right: none;
  border-bottom: none;
}

.contract .main .mtable .mtr:nth-child(3) .mth:nth-child(2) {
  border-bottom: none;
}

.contract .main .mtable .mtr:nth-child(4) .mth:nth-child(1) {
  border-right: none;
  border-bottom: none;
}

.contract .main .mtable .mtr:nth-child(4) .mth:nth-child(2) {
  border-bottom: none;
}

.contract .main .mtable .mtr:nth-child(5) .mth:nth-child(1) {
  border-right: none;
  border-bottom: none;
}

.contract .main .mtable .mtr:nth-child(5) .mth:nth-child(2) {
  border-bottom: none;
}

.contract .main .mtable .mtr:nth-child(6) .mth:nth-child(1) {
  border-right: none;
  border-bottom: none;
}

.contract .main .mtable .mtr:nth-child(6) .mth:nth-child(2) {
  border-bottom: none;
}

.contract .main .mtable .mtr:nth-child(7) .mth:nth-child(1) {
  border-right: none;
}

.contract .main .content-your {
  font-weight: bold;
  font-size: 36rpx;
  color: #333;
  width: 100%;
  text-align: left;
  margin-top: 30rpx;
  position: relative;
  text-indent: 1em;
}

.contract .main .content-your .content-chapter {
  position: absolute;
  left: 30rpx;
  top: 0;
  width: 180rpx;
  height: 140rpx;
  border-radius: 100%;
}

.contract .main .content-just1 {
  margin-top: 40rpx;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.contract .main .content-just1 .content-text {
  font-size: 36rpx;
  color: #000;
  font-weight: bold;
}

.contract .main .content-just1 .content-text1 {
  text-indent: 1em;
}

.contract .main .content-just2 {
  margin-top: 70rpx;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.contract .main .content-just2 .content-text {
  font-size: 36rpx;
  color: #000;
  font-weight: bold;
}

.contract .main .content-left {
  margin-top: 40rpx;
  text-align: left;
  font-size: 28rpx;
  font-weight: bold;
}

/* 头部额度部分 */
</style>
